<div id="next_page_{{ current_page }}"
     x-data="{ in_progress: false }"
     class="flex justify-center items-center gap-x-1 font-semibold
            text-slate-500 dark:text-slate-400 creme:text-stone-500
            [&>div>div]:flex [&>div>div]:flex-row [&>div>div]:items-center [&>div>div]:gap-x-1 pt-2">
    {% if next_page_available %}
    <div id="next_page_{{ current_page }}_toggle">
        <div class="cursor-pointer hover:text-slate-900 dark:hover:text-slate-100 creme:hover:text-stone-700"
             x-show="!in_progress"
             @click="in_progress = true"
             {% if page == 'pdf_details_highlights' or page == 'pdf_details_comments' %}
             hx-get="{% url get_next_overview_page_name page=current_page|add:1 identifier=pdf.id %}?{{ request.META.QUERY_STRING }}"
             {% else %}
             hx-get="{% url get_next_overview_page_name page=current_page|add:1 %}?{{ request.META.QUERY_STRING }}"
             {% endif %}
             hx-target="#next_page_{{ current_page }}"
             hx-swap="outerHTML">
            <a>Load More</a>
            <svg class="w-5 h-5 -rotate-90!"
                 fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.004 400.004" xml:space="preserve">
                <!-- source: https://www.svgrepo.com/svg/97894/left-arrow -->
                <!-- license: CC0 License-->
                <path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757
                    c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072
                    c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315
                    C400.004,190.438,392.251,182.686,382.688,182.686z"/>
            </svg>
        </div>
        <svg x-show="in_progress" x-cloak
             class="animate-spin -ml-1 mr-3 h-5 w-5 text-slate-800 dark:text-slate-200 creme:text-stone-700"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>
    {% endif %}
    {% if next_page_available and current_page > 1 %}
    <span x-show="!in_progress" class="cursor-default mb-1 pl-1 pr-2">|</span>
    {% endif %}
    {% if current_page > 1 %}
    <div>
        <div x-show="!in_progress"
             class="cursor-pointer hover:text-slate-900 dark:hover:text-slate-100 creme:hover:text-stone-700"
             @click="window.scrollTo({top: 0, behavior: 'smooth'})">
            <a>Back to Top</a>
            <svg x-show="!in_progress"
                 class="w-5 h-5 rotate-90!"
                 fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.004 400.004" xml:space="preserve">
                <!-- source: https://www.svgrepo.com/svg/97894/left-arrow -->
                <!-- license: CC0 License-->
                <path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757
                    c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072
                    c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315
                    C400.004,190.438,392.251,182.686,382.688,182.686z"/>
            </svg>
        </div>
    </div>
    {% endif %}
</div>
